<template>
	<view class="content">

		<view class="list-item" v-if="false">

			<text class="mtitle" style="padding-left: 30upx;">提醒事件</text>

			<u-line color="#f5f5f5"></u-line>

			<view class="time-sel">
				<text v-for="(item, index) in timeSelList" :key="index" @click="timeClick(index)"
					:style="{'color':index === selIndex?'#20c3aa':'#333333','transform':index===selIndex ? 'scale(1.1)':'scale(1.0)'}">{{item}}</text>
			</view>

			<view class="mitem">
				<u-grid :border="false" col="2">
					<u-grid-item>

						<view class="item-wrap">

							<view class="item-wrap-bg">
							</view>

							<view class="item-count">
								<text class="item-count-count">{{failCount}}</text>
								<text class="item-count-name" style="color: #333;">扣款失败订单</text>
							</view>

						</view>

					</u-grid-item>

					<u-grid-item>

						<view class="item-wrap">
							<view class="item-wrap-bg">
							</view>

							<view class="item-count">
								<text class="item-count-count">{{partSuccessCount}}</text>
								<text class="item-count-name" style="color: #333;">部分扣款成功订单</text>
							</view>

						</view>
					</u-grid-item>
				</u-grid>

			</view>

		</view>

		<view style="height: 40upx;">

		</view>
		
		<view class="list-item mitem" v-for="(ditem, dindex) in datalist" :key="dindex">
			<text class="mtitle">{{ditem.name}}</text>

			<u-grid :border="false" col="2">

				<u-grid-item v-for="(listItem,listIndex) in ditem.child" :key="listIndex"
					@click="childClick(listItem.path)">

					<view class="item-wrap">
						<image :src="listItem.src" mode="scaleToFill"></image>

						<view class="item-count">
							<text class="item-count-name">{{listItem.name}}</text>
						</view>

					</view>
				</u-grid-item>

			</u-grid>

		</view>

		<!-- 底部导航 -->
		<HomeTabbar :tab="0"></HomeTabbar>

	</view>
</template>

<script>
	import HomeTabbar from '@/components/mmv-ui/tabbar.vue';
	import {
		workhome
	} from '@/api/home-api.js';

	export default {
		components: {
			HomeTabbar,
		},
		data() {
			return {
				timeSelList: [
					"今日",
					"昨天",
					"本周",
					"本月",
					"本年",
					"全部",
				],
				selIndex: 0,
				failCount: '',
				partSuccessCount: '',
				datalist: [{
						name: "快捷入口",
						child: [{
								name: "立即签约",
								path: '/pagesA/qianyue/index',
								src: '/static/workhome/home2.png'
							},
							// {
							// 	name: "风险查询",
							// 	path: ''
							// },
							// {
							// 	name: "我的线索",
							// 	path: ''
							// },
							{
								name: "我的客户",
								path: '/pagesB/my-custom/my-custom-list',
								src: '/static/workhome/home5.png'
							},

						]
					},
					{
						name: "业务管理",
						child: [{
								name: "签约订单",
								path: '/pagesA/order/qianyue/index',
								src: '/static/workhome/home6.png',
								count: 12
							},
							{
								name: "扣款订单",
								path: '/pagesA/order/koukuan/index',
								src: '/static/workhome/home7.png'
							},
							// {
							// 	name: "四要素查询订单",
							// 	path: ''
							// },
							// {
							// 	name: "风险查询订单",
							// 	path: ''
							// },
							// {
							// 	name: "员工管理",
							// 	path: ''
							// },
							// {
							// 	name: "业务维护",
							// 	path: ''
							// },

						]
					},
					// {
					// 	name: "数据统计",
					// 	child: [{
					// 			name: "账单统计",
					// 			path: ''
					// 		},
					// 		{
					// 			name: "业绩分佣统计",
					// 			path: ''
					// 		},

					// 	]
					// },

				]
			}
		},
		computed: {
			isNotLogin() {
				let token = this.$store.state.user.token;

				if (!uni.$u.test.isEmpty(token)) {
					this.getHomeData();
				}

				return uni.$u.test.isEmpty(token);
			},

		},
		onLoad() {},
		methods: {

			timeClick(index) {
				this.selIndex = index;

				if (this.isNotLogin) {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				}
			},

			childClick(path) {
				if (this.isNotLogin) {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				} else {
					uni.navigateTo({
						url: path
					})
				}

			},

			getHomeData() {
				workhome({
					type: this.selIndex
				}).then(res => {
					this.failCount = res.data.failCount;
					this.partSuccessCount = res.data.partSuccessCount;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
	}

	.mitem {
		margin-top: 0;
		padding: 0 30upx 100upx;
	}

	.mtitle {
		color: #333;
		font-weight: bold;
		font-size: 28upx;
		margin: 20upx 0;
	}

	.time-sel {
		display: flex;
		margin: 20upx 30upx 10upx;

		text {
			font-weight: bold;
			font-size: 26upx;
			flex-grow: 1;
			text-align: center;
		}
	}

	.item-wrap {
		position: relative;
		height: 140upx;
		width: 92%;
		margin-top: 10upx;

		&-bg {
			height: 140upx;
			width: 100%;
			background-color: #EDEDED;
			border-radius: 8upx;
		}

		image {
			height: 140upx;
			width: 100%;
		}

		.item-count {
			width: 280upx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-count {
				color: #20c3aa;
				font-size: 30upx;
				font-weight: bold;
				margin-bottom: 10upx;
			}

			&-name {
				color: #fff;
				font-size: 24upx;
			}
		}
	}
</style>
